<template>
	<view class="banner-box" v-if="bannerList.length > 0">
		<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500" circular style="border-radius: 16upx;height:278upx;"
		 @change="onChange">
			<swiper-item v-for="(item,index) in bannerList" :key="item.book_id" style="border-radius: 16upx;" @click="handleToRead(item.book_id)">
				<view class="banner-bg" :style="'background-image:url('+item.image+')'"></view>
				<view class="banner-wrap" :style="`background:${readTheme.bannerBackground}`"></view>
				<view class="book-box" @click="handleToRead(item.book_id)">
					<view class="book-detail">
						<view class="book-info">
							<view class="book-name u-line-1">{{item.name}}</view>
							<view class="book-writer u-line-1">{{item.writer}}著</view>
							<view class="book-new u-line-1" v-if="item.new_chapter">
								最新
								<br />
								{{item.new_chapter}}
							</view>
						</view>
						<u-image class="book-img" width="114upx" height="152upx" border-radius="16" :src="item.image" :fade="true"
						 duration="450" mode="cover">
							<u-loading slot="loading"></u-loading>
							<view slot="error" style="font-size: 24upx;">加载失败</view>
						</u-image>
					</view>
					<view class="book-bottom">
						<view class="book-other">
							<text class="book-over">{{item.is_over}}</text>
							<text class="book-line"></text>
							<text class="book-type">{{item.type}}</text>
						</view>
						<text class="book-index">{{current + 1}}/{{bannerList.length}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				current: 0,
			};
		},
		computed: {
			...mapGetters({
				readTheme: 'readTheme'
			})
		},
		props: {
			type: Number,
			bannerList: {
				default: [],
				type: [Array, Object]
			}
		},
		methods: {
			onChange(event) {
				this.current = event.target.current;
			},
			handleToRead(book_id) {
				uni.navigateTo({
					url: `/pages/detail/index?bookId=${book_id}`
				});
			},
		},
	};
</script>

<style scoped>
	.banner-box {
		border-radius: 16upx;
		box-shadow: 0upx 17upx 46upx 0upx rgba(6, 27, 65, 0.16);
	}

	.banner-bg {
		height: 278upx;
		background-repeat: no-repeat;
		background-size: 670upx 278upx;
		filter: blur(20upx);
		border-radius: 16upx;
		opacity: 0.85;
	}

	.banner-wrap {
		height: 278upx;
		position: relative;
		bottom: 278upx;
		left: 0;
		border-radius: 16upx;
	}

	.book-box {
		height: 278upx;
		position: relative;
		bottom: 556upx;
		opacity: 0.85;
		border-radius: 16upx;
		display: flex;
		flex-direction: column;
	}

	.book-detail {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 32upx 0upx 20upx 0upx;
		margin: 0 30upx 0 30upx;
		border-bottom: 1upx rgba(255, 255, 255, 0.25) solid;
	}

	.book-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.book-name {
		font-size: 36upx;
		line-height: 36upx;
		font-family: Alibaba PuHuiTi;
		font-weight: 800;
		color: rgba(255, 255, 255, 0.85);
		margin-top: 4upx;
	}

	.book-writer {
		font-size: 18upx;
		/* line-height: 18upx; */
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.851);
		margin-top: 9upx;
		margin-left: 2upx;
	}

	.book-new {
		width: 400upx;
		font-size: 18upx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.65);
		/* line-height: 36upx; */
		margin-top: 18upx;
		margin-left: 2upx;
	}

	.book-img {
		width: 114upx;
		height: 152upx;
		border-radius: 12upx;
	}

	.book-bottom {
		display: flex;
		padding: 18upx 36upx 0upx 30upx;
		align-items: center;
		justify-content: space-between;
	}

	.book-other {
		display: flex;
		align-items: center;
	}

	.book-over {
		font-size: 18upx;
		line-height: 18upx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.65);
	}

	.book-line {
		float: left;
		width: 2upx;
		height: 12upx;
		background: rgba(255, 255, 255, 0.65);
		border-radius: 1upx;
		margin: 0 16upx;
	}

	.book-type {
		font-size: 18upx;
		line-height: 18upx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.65);
	}

	.book-index {
		font-size: 22upx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.65);
		line-height: 30upx;
	}
</style>
